<template>
  <div class="pl-6">
    <Rate :value="4" theme="green" />
    <Rate :value="2" theme="blue" />
    <Rate :value="5" theme="black" />
    <van-divider>微信图片下载</van-divider>
    <download-wx-image />

    <canvas id="tutorial" width="300" height="300" ref="el">
      <img width="300" height="300" src="../../assets/1.png" alt="" />
    </canvas>
    <button @click="startFrame">开始绘制图形</button>

    <div class="text-parent">
      <div class="text-center w-full text-4xl text">我是前端开发工程师</div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Demos',
};
</script>

<script setup lang="ts">
import type { SiteModel } from '@/utils/rect';
import { getAllPosition } from '@/utils/rect';
import Rate from './Rate.vue';
import downloadWxImage from './downloadWxImage.vue';

const el = ref<HTMLCanvasElement>();
const ctx = computed(() => el.value!.getContext('2d')!);

const startPoint = reactive({
  x: 0,
  y: 0,
});

const endPoint = reactive({
  x: 0,
  y: 0,
});

onMounted(() => {
  ctx.value.fillRect(25, 25, 100, 100);

  endPoint.x = el.value?.clientWidth;
  endPoint.y = el.value?.clientHeight;
  const {
    allSiteList: a,
    drawIndex: i,
    dispatchDraw: fn,
  } = getAllPosition(startPoint, endPoint as SiteModel);
  allSiteList = a;
  drawIndex = i;
  dispatchDraw = fn;
});

let allSiteList: any = [];
let drawIndex = ref(0);
let dispatchDraw: Function = () => {};
function startFrame() {
  requestAnimationFrame(() => {
    if (drawIndex.value >= allSiteList.length) {
      console.log('drawIndex.value', drawIndex.value);
      console.log('allSiteList.value', allSiteList.length);
      return;
    }
    dispatchDraw();
    lineTo(
      {
        x: allSiteList[drawIndex.value].x,
        y: allSiteList[drawIndex.value].y,
      },
      {
        x: allSiteList[drawIndex.value + 1].x,
        y: allSiteList[drawIndex.value + 1].y,
      }
    );
    startFrame();
  });
}

function lineTo(p1: SiteModel, p2: SiteModel) {
  ctx.value.beginPath();
  ctx.value.moveTo(p1.x, p1.y);
  ctx.value.lineTo(p2.x, p2.y);
  ctx.value.stroke();
}
</script>

<style scoped>
#tutorial {
  border: 1px solid #333;
}

.text-parent {
  filter: contrast(30);
}
.text {
  font-size: 100px;
  letter-spacing: -50px;
  animation: showup 2s linear forwards infinite;
}
@keyframes showup {
  0% {
    filter: blur(10px);
  }
  100% {
    letter-spacing: 10px;
    filter: blur(2px);
  }
}
</style>
